<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1,backbone hello world</title>
<script src="//cdn.bootcss.com/require.js/2.1.22/require.min.js"></script>
</head>
<body>
	<button id="check">新手报到</button>
	<ul id="world-list">
	</ul>
	<script>
		var config = {
			paths : { // 如果某个前缀的依赖不是按照baseUrl拼接这么简单，就需要在这里指出
				zepto : 'http://cdn.bootcss.com/zepto/1.1.6/zepto.min',
				jquery : 'http://cdn.bootcss.com/jquery/1.12.1/jquery.min',
				underscore : 'http://cdn.bootcss.com/underscore.js/1.8.3/underscore',
				backbone : 'http://cdn.bootcss.com/backbone.js/1.2.3/backbone-min'
			},
			shim : { // 引入没有使用requirejs模块写法的类库。backbone依赖underscore
				'underscore' : {
					exports : '_'
				},
				'zepto' : {
					exports : '$'
				},
				'backbone' : {
					deps : [ 'underscore', 'zepto' ],
					exports : 'Backbone'
				}
			}
		};
		require.config(config);

		require([ "backbone", "zepto" ], function() {
			
			
			World = Backbone.Model.extend({
				//创建一个World的对象，拥有name属性
				name : null
			});

			Worlds = Backbone.Collection.extend({
				//World对象的集合
				initialize : function(models, options) {
					this.bind("add", options.view.addOneWorld);
				}
			});

			AppView = Backbone.View.extend({
				el : $("body"),
				initialize : function() {
					//构造函数，实例化一个World集合类
					//并且以字典方式传入AppView的对象
					this.worlds = new Worlds(null, {
						view : this
					})
				},
				events : {
					//事件绑定，绑定Dom中id为check的元素
					"click #check" : "checkIn",
				},
				checkIn : function() {
					var world_name = prompt("请问，您是哪星人?");
					if (world_name == "")
						world_name = '未知';
					var world = new World({
						name : world_name
					});
					this.worlds.add(world);
				},
				addOneWorld : function(model) {
					$("#world-list").append(
							"<li>这里是来自 <b>" + model.get('name')
									+ "</b> 星球的问候：hello world！</li>");
				}
			});
			//实例化AppView
			var appview = new AppView;
		})
	</script>
</body>
</html>